<template>
  <div class="home">
    <h1>{{state.foo}}</h1>
    <button @click="state.foo++">state.foo</button>
    <h1>{{state.nested.bar}}</h1>
    <button @click="state.nested.bar++">state.nested.bar</button>
    <hr>
    <h1>{{a.b}}</h1>
    <button @click="a.b++">a.b</button>
    <hr>
    <h1>{{count}}</h1>
    <h1>{{person}}</h1>
    <h1>{{name}}</h1>
    <h1>{{age}}</h1>
    <button @click="count++">count++</button>
    <button @click="name+='~'">name++</button>
    <button @click="age++">age++</button>
  </div>
</template>

<script>
import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref, toRef, reactive,toRefs,shallowReactive,shallowRef } from 'vue'
import AboutViewVue from './AboutView.vue';
export default {
  components:{
    AboutViewVue
  },
  setup() {
    let count=ref(0)
    let person=reactive({
      name:'lz',
      age:25,
      sex:'男'
    })
    //shallowRef如果是基本数据类型 功能与ref一样，如果是引用数据类型数据就不会是响应式的
    const a = shallowRef({b:1})
    // a.value.b = 2  //视图不会更新
    console.log(a.value) //{b : 2} 但是能追踪到值得变化

    a.value={b:2} //一整个替换时，视图会变化
    //shallowReactive只有最外层的属性是响应的
    const state = shallowReactive({
      foo: 1,
      nested: {
        bar: 2
      }
    })
    console.log(person)
    //toRef:创建一个对象，其value值指向另外一个对象的某一个属性
    //使用场景：要将响应式对象中的某一个属性单独提供给外部使用
    //toRefs：批量处理传入的对象，让其最外层的属性全部变成一个refimpl实例对象
    return {
      a,
      person,
      state,
      // name:toRef(person,'name'),
      // age:toRef(person,'age'),
     ...toRefs(person),
      count,
    }
  },
}
</script>
